<!--
 * @Author: zheng yong tao
 * @Date: 2022-01-15 15:37:22
 * @LastEditors: zheng yong tao
 * @LastEditTime: 2022-03-05 23:51:21
 * @Description: 
-->
<template>
  <div class="blog-menu-top">
    <span class="blog-menu-top-name" @click="goRouter('home')">
      <span>JYeontu</span>
      <i
        v-if="getJBlogLogin"
        class="iconfont icon-xiaoxi"
        :title="'未读消息：' + comments.length"
        @click.stop="dialogVisible = true"
      >
        <span class="need-read">{{ comments.length }}</span>
      </i>
    </span>
    <div class="menu">
      <span
        v-for="(menu, index) in menuList"
        :key="index"
        :class="getMenuClass(menu.route)"
        @click="goRouter(menu.route)"
      >
        {{ menu.label }}
      </span>
    </div>
    <el-dialog
      title="未读消息"
      :visible.sync="dialogVisible"
      width="60%"
      :modal="false"
    >
      <div class="all-comments">
        <div v-for="(item, index) in comments" :key="'comment-' + index">
          <img :src="item.avatar" class="comment-avatar" />
          <span>用户{{ item.nickname }}</span>
          <!-- <span>于{{ item.create_time }}</span> -->
          <span>在博客</span>
          <span>《{{ item.blog_name }}》</span>
          <span>中评论“{{ item.content }}”</span>
          <span class="to-blog" @click="toAudit()">去看看</span>
          <span class="pass-audit" @click="setIsShow(item.id, index)"
            >通过审核</span
          >
          <el-divider>{{ item.create_time }}</el-divider>
        </div>
        <div v-if="comments.length == 0">暂无消息</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" style="color:black !important"
          >取 消</el-button
        >
        <el-button type="primary" @click="doReadAllComment">标记已读</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import {
  getNeedReadComment,
  readComment,
  readAllComment,
  setCommentShow
} from "../../config/api";
import { dateFormat } from "../../util/dateTool";
export default {
  name: "topMenu",
  data() {
    return {
      dialogVisible: false,
      comments: [],
      menuList: [
        { label: "首页", route: "home" },
        { label: "栏目", route: "column" },
        { label: "归档", route: "filing" },
        { label: "关于", route: "about" }
      ]
    };
  },
  computed: {
    ...mapGetters(["getJBlogLogin"])
  },
  watch: {
    getJBlogLogin(newVal) {
      this.menuList = [
        { label: "首页", route: "home" },
        { label: "栏目", route: "column" },
        { label: "归档", route: "filing" },
        { label: "关于", route: "about" }
      ];
      if (newVal) {
        this.menuList.unshift({ label: "写博客", route: "articleWrite" });
        this.menuList.push({ label: "审核", route: "audit" });
        this.menuList.push({ label: "统计", route: "statistics" });
        this.menuList.push({ label: "退出登录", route: "loginOut" });
        this.doGetNeedReadComment();
      }
    }
  },
  mounted() {
    if (this.getJBlogLogin) {
      this.menuList.unshift({ label: "写博客", route: "articleWrite" });
      this.menuList.push({ label: "审核", route: "audit" });
      this.menuList.push({ label: "统计", route: "statistics" });
      this.menuList.push({ label: "退出登录", route: "loginOut" });
      this.doGetNeedReadComment();
    }
  },
  methods: {
    ...mapMutations(["setJBlogLogin"]),
    toDetail(id, blog_id, index) {
      this.$router.push({ name: "articleDetail", query: { id: blog_id } });
      this.httpPost(readComment, { id }).then(res => {
        if (res.code == 1) {
          this.comments.splice(index, 1);
        }
      });
      this.dialogVisible = false;
    },
    doReadComment(id, index) {
      this.httpPost(readComment, { id }).then(res => {
        if (res.code == 1) {
          this.comments.splice(index, 1);
        }
      });
    },
    toAudit() {
      this.$router.push({ name: "audit" });
      this.dialogVisible = false;
    },
    async setIsShow(id, index) {
      let res = await this.httpPost(setCommentShow, {
        id: id,
        is_show: 1
      });
      if (res.code == 1) {
        this.doReadComment(id, index);
      }
    },
    async doReadAllComment() {
      const res = await this.httpPost(readAllComment, {});
      if (res.code == 1) this.comments = [];
    },
    async doGetNeedReadComment() {
      const res = await this.httpGet(getNeedReadComment, {});
      if (res.code == 1) {
        this.comments = res.data;
        this.comments.map(item => {
          item.create_time = dateFormat(
            item.create_time,
            "yyyy-mm-dd hh:MM:ss"
          );
        });
      }
    },
    getMenuClass(route) {
      if (route == this.$route.name) return "active";
      return "";
    },
    goRouter(route) {
      if (this.$route.name == "articleWrite") {
        if (confirm("放弃编辑内容？")) {
          this.$router.push({ name: route });
        }
        return;
      }
      if (!["home", "articleWrite"].includes(route)) {
        localStorage.setItem("JPage", 1);
      }
      if (route == "loginOut") {
        if (confirm("退出登录？")) {
          localStorage.removeItem("JBlogLogin");
          localStorage.removeItem("JUsername");
          localStorage.removeItem("JPassword");
          this.setJBlogLogin(false);
          this.$router.go(0);
        }
        return;
      }
      this.$router.push({ name: route });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog__header {
  text-align: left;
}
.all-comments {
  text-align: left;
  padding-left: 1em;
  .comment-avatar {
    width: 20px;
    height: 20px;
    background-size: cover;
    border-radius: 50%;
  }
  .to-blog {
    color: skyblue;
    text-decoration: underline;
    cursor: pointer;
  }
  .pass-audit {
    color: rgb(52, 132, 52);
    text-decoration: underline;
    cursor: pointer;
    margin-left: 1em;
  }
}
.blog-menu-top {
  background-color: white;
  height: 60px;
  line-height: 60px;
  .blog-menu-top-name {
    float: left;
    margin-left: 1rem;
    font-size: xx-large;
    font-weight: bold;
    font-family: fantasy;
    cursor: pointer;
    .iconfont {
      position: relative;
      .need-read {
        color: red;
        font-size: xx-small;
        display: inline-block;
        padding: 1px;
        position: relative;
      }
    }
  }
  .menu {
    font-size: x-large;
    font-family: cursive;
    font-weight: bold;
    float: right;
    margin-right: 2rem;
    span {
      margin-left: 1rem;
      cursor: pointer;
    }
  }
  .active {
    text-decoration: underline;
    color: deepskyblue;
  }
}
@media screen and (max-width: 980px) {
  .blog-menu-top {
    .blog-menu-top-name {
      font-size: large;
    }
    .menu {
      font-size: large;
    }
  }
}
</style>
